<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>xxxx大学实验室预约系统</title>
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/layui/css/layui.css">

</head>
<body class="layui-layout-body" style="height: 1200px" layadmin-themealias="purple-red">
<div id="LAY_app" class="layadmin-tabspage-none layadmin-side-spread-sm">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部区域 -->
        <#--<div class="layui-header">
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect="">
                    <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                        <i class="layui-icon layui-icon-spread-left" id="LAY_app_flexible"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:location.reload();" layadmin-event="refresh" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    <span>xxxx实验室预约系统</span>
                </li>
                <span class="layui-nav-bar" style="left: 94px; top: 48px; width: 0px; opacity: 0;"></span>
            </ul>
            <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
                <li class="layui-nav-item" lay-unselect="">
                    <a lay-href="app/message/" layadmin-event="message">
                        <i class="layui-icon layui-icon-notice"></i>
                        <!-- 如果有新消息，则显示小圆点 &ndash;&gt;
                        <script type="text/html" template="" lay-url="./json/message/new.js">
                            {{# if(d.data.newmsg){ }}
                            <span class="layui-badge-dot"></span>
                            {{# } }}
                        </script>
                        <span class="layui-badge-dot"></span>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                    <a href="javascript:;" layadmin-event="theme">
                        <i class="layui-icon layui-icon-theme"></i>
                    </a>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                    <a href="javascript:;" layadmin-event="fullscreen">
                        <i class="layui-icon layui-icon-screen-full"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    <script type="text/html" template="" lay-url="./json/user/session.js"
                            lay-done="layui.element.render('nav', 'layadmin-layout-right');">
                        <a href="javascript:;">
                            <cite>{{ d.data.username }}</cite>
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a lay-href="set/user/info">基本资料</a></dd>
                            <dd><a lay-href="set/user/password">修改密码</a></dd>
                            <hr>
                        </dl>
                    </script>
                    <a href="javascript:;"> <cite>贤心</cite> <span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child layui-anim layui-anim-upbit">
                        <dd><a lay-href="set/user/info">基本资料</a></dd>
                        <dd><a lay-href="set/user/password">修改密码</a></dd>
                        <hr>
                        <dd layadmin-event="logout" style="text-align: center;"><a>退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="/logout.do">安全退出</a>
                </li>
                <span class="layui-nav-bar" style="left: 326px; top: 48px; width: 0px; opacity: 0;"></span>
            </ul>
        </div>-->
        <div class="layui-header header" >
            <div class="layui-main">
                <a href="#" class="layui-logo"> xxxx实验室预约系统</a>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item">
                        <a href="javascript:location.reload();">首页</a>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"> <img
                            src="http://t.cn/RCzsdCq" class="layui-nav-img"> 你好： <shiro:principal/>
                    </a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="jsp/user/editPassword.jsp" target="_blank">修改密码</a>
                            </dd>
                            <dd>
                                <a href=""><img src="img/help.png">  帮助</a>
                            </dd>
                        </dl></li>
                    <li class="layui-nav-item"><a href="/logout.do">安全退出</a></li>
                </ul>
            </div>
        </div>
        <!-- 左侧导航 -->
        <div class="layui-side layui-bg-black layui-side-menu">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-shrink="all">
                    <li class="layui-nav-item"><a class="" href="javascript:;"><i class="layui-icon layui-icon-read"
                                                                                  style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>
                        实验室预约</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="1" data-title="预约管理"
                                   data-url="/LabOrder/toLabOrder"
                                   class="site-demo-active" data-type="tabAdd">预约管理</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a class="" href="javascript:;"><i class="layui-icon layui-icon-app"
                                                                                  style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>
                        课表管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="1" data-title="课表管理"
                                   data-url="/courseTable/tocourseTable"
                                   class="site-demo-active" data-type="tabAdd">课表管理</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-app"
                                                                         style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>学院管理</a>
                        <dl class="layui-nav-child">
                                <dd>
                                    <a href="javascript:;" data-id="3" data-title="学院管理"
                                       data-url="/college/toCollege" class="site-demo-active"
                                       data-type="tabAdd">学院管理</a>
                                </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-app"
                                                                         style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>实验室管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="4"
                                   data-title="实验室管理" data-url="/labs/toLabs"
                                   class="site-demo-active" data-type="tabAdd">实验室管理</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-app"
                                                                         style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>课程管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="6"
                                   data-title="教师管理" data-url="/course/toCourse"
                                   class="site-demo-active" data-type="tabAdd">课程管理</a>
                            </dd>

                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-app"
                                                                         style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>教师管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="6"
                                   data-title="教师管理" data-url="/teacher/toTeacher"
                                   class="site-demo-active" data-type="tabAdd">教师管理</a>
                            </dd>

                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-read"
                                                                         style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>学生管理</a>

                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="9"
                                   data-title="学生管理" data-url="/student/toStudent"
                                   class="site-demo-active" data-type="tabAdd">学生管理</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-read"
                                                                         style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>用户管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="13"
                                   data-title="用户管理" data-url="/user/toUser"
                                   class="site-demo-active" data-type="tabAdd">用户管理</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-id="14"
                                   data-title="角色管理" data-url="/jsp/chart/touzi.html"
                                   class="site-demo-active" data-type="tabAdd">角色管理</a>
                            </dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item"><a href="javascript:;"><i class="layui-icon layui-icon-read"
                                                                         style="font-size: 20px; color: #00CCCC;padding-right: 10px"></i>系统管理</a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="javascript:;" data-id="15"
                                   data-title="公告管理" data-url="/announce/toAnnounce"
                                   class="site-demo-active" data-type="tabAdd">公告管理</a>
                            </dd>
                            <dd>
                                <a href="javascript:;" data-id="16"
                                   data-title="日志管理" data-url="/log/toLog"
                                   class="site-demo-active" data-type="tabAdd">日志管理</a>
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>


        <!--tab标签-->
        <div class="layui-tab" lay-filter="demo" lay-allowclose="true"
             style="margin-left: 200px; background-color: #F0F9FD">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content ">
            </div>
        </div>
    </div>
</div>
<script src="/layui/layui.js"></script>
<script>

    <!--这里是放置js代码区域-->
    layui.use(['element', 'layer', 'jquery', 'table'], function () {
        var element = layui.element;
        var $ = layui.$;
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.pushState('forward', null, '');
                window.history.forward(1);
            });
        }
        window.history.pushState('forward', null, '');
        window.history.forward(1);

        $("#menu_three").on("click", function () {
            $(this).next().toggle();
        })
        $("#menu_four").on("click", function () {
            $(this).next().toggle();
        })
        $("#menu_five").on("click", function () {
            $(this).next().toggle();
        })
        $("ol").on("click", "li a", function () {
            $.each($(this).parent().siblings(), function (i, e) {
                $(e).find("a").removeClass('three_this')
            });
            $(this).addClass('three_this');                            // 添加当前元素的样式
        })
        var active = {
            //在这里给active绑定几项事件，后面可通过active调用这些事件
            tabAdd: function (url, id, name) {
                //新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
                //关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
                element.tabAdd('demo', {
                    title: name,
                    content: '<iframe data-frameid="' + id
                    + '" scrolling="auto" frameborder="0" src="'
                    + url
                    + '" style="width:100%;height:99%;"></iframe>',
                    id: id
                    //规定好的id
                })
                FrameWH(); //计算ifram层的大小
            },
            tabChange: function (id) {
                //切换到指定Tab项
                element.tabChange('demo', id); //根据传入的id传入到指定的tab项
            },
            tabDelete: function (id) {
                element.tabDelete("demo", id);//删除
            }
        };
        //后台首页
        active.tabAdd('/index/toIndex', 14, '后台首页');
        active.tabChange(14);
        // 配置tab实践在下面无法获取到菜单元素
        $('.site-demo-active').on(
                'click',
                function () {
                    var dataid = $(this);
                    //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
                    if ($(".layui-tab-title li[lay-id]").length <= 0) {
                        //如果比零小，则直接打开新的tab项
                        active.tabAdd(dataid.attr("data-url"), dataid
                                .attr("data-id"), dataid
                                .attr("data-title"));
                        /*active.tabDelete(0);*/
                    } else {
                        //否则判断该tab项是否以及存在
                        var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                        $.each($(".layui-tab-title li[lay-id]"),
                                function () {
                                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                                    if ($(this).attr("lay-id") == dataid
                                            .attr("data-id")) {
                                        isData = true;
                                        active.tabDelete(dataid.attr("data-id"));
                                        active.tabAdd(dataid.attr("data-url"), dataid
                                                .attr("data-id"), dataid
                                                .attr("data-title"));
                                    }
                                })
                        if (isData == false) {
                            //标志为false 新增一个tab项
                            active.tabAdd(dataid.attr("data-url"), dataid
                                    .attr("data-id"), dataid
                                    .attr("data-title"));
                        }
                    }
                    //最后不管是否新增tab，最后都转到要打开的选项页面上
                    active.tabChange(dataid.attr("data-id"));
                });
        function FrameWH() {
            var h = $(window).height();
            $("iframe").css("height", h + "px");
        }
    });
</script>
</body>
</html>
